/*
  目标： 使用Context来跨组价通信，让App组件-直接传数据给SonSon组件
  1. React.createContext创建上下文, 解构出两个组件
  2. 使用Provider组件，传数据: 设置value属性传数据
  3. 使用Consumer组件，接收数据
*/

import React from 'react';
import ReactDom from 'react-dom/client';

const { Provider, Consumer } = React.createContext();

class Handler extends React.Component {
  render() {
    return (
      <div>
        <h3>父组件</h3>
        {/* 使用Provider组件，来传递数据。设置value属性传递数据 */}
        <Provider value="我是悟空字符串">
          <Son></Son>
        </Provider>
      </div>
    );
  }
}

class Son extends React.Component {
  render() {
    return (
      <div>
        <h3>子组件</h3>
        <SonSon></SonSon>
      </div>
    );
  }
}
class SonSon extends React.Component {
  render() {
    return (
      <div>
        <h3>孙组件</h3>
        {/* 使用Consumer组件，接收数据 */}
        <Consumer>
          {/* 接受一个函数，返回需要返回一端JSX，形参就是传递过来的数据 */}
          {(data) => {
            return <div>{data}</div>;
          }}
        </Consumer>
      </div>
    );
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
